<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>入库</title>
	<style>

		#selectForm{
			margin: 20px 0 0 300px;
		}

		#table{
			margin: 50px 0 0 100px;
		}

		#addbutton{
			margin: 10px 0 0 1000px;
		}
	</style>
</head>

<!--引入相关的文件-->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<script src="js/xlsx.full.min.js"></script>

<body>

<div id="app">
	<!--查询-->
	<el-form :inline="true" :model="selectData" class="demo-form-inline" id="selectForm">
		<el-form-item label="商品编号">
			<el-input v-model="selectData.id"></el-input>
		</el-form-item>
		<el-form-item label="商品名称">
			<el-input v-model="selectData.name"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" plain @click="select">查询</el-button>
			<el-button type="success" @click="exportToExcel">导出excel</el-button>
		</el-form-item>
	</el-form>

	<!--采购信息表格（未入库）-->
	<el-table
			:data="tableData"
			height="500"
			border
			style="width: 85%"
			id="table">
		<el-table-column
				prop="purchaseId"
				label="编号"
				width="140">
		</el-table-column>
		<el-table-column
				prop="commodityId"
				label="商品编号"
				width="140">
		</el-table-column>
		<el-table-column
				prop="commodityName"
				label="商品名称"
				width="160"
				:show-overflow-tooltip='true'>
		</el-table-column>
		<el-table-column
				prop="purchaseQuantity"
				label="采购数量"
				width="130">
		</el-table-column>
		<el-table-column
				prop="unitPrice"
				label="商品单价"
				width="130">
		</el-table-column>
		<el-table-column
				prop="totalPrice"
				label="总额"
				width="120">
		</el-table-column>
		<el-table-column
				prop="purchaseDate"
				label="采购时间"
				width="165">
		</el-table-column>
		<el-table-column label="操作" width="140">
			<template slot-scope="scope">
				<el-button size="mini" type="primary" @click="purchase(scope.$index, scope.row)">入库</el-button>
			</template>
		</el-table-column>
	</el-table>

	<!--添加采购信息-->
	<el-button type="primary" @click="dialogFormVisible = true" id="addbutton">添加采购信息</el-button>

	<el-dialog title="采购信息" :visible.sync="dialogFormVisible">
		<el-form :model="addData" :rules="rules" ref="addData">
			<el-form-item label="商品编号" :label-width="formLabelWidth" prop="commodityId">
				<el-input v-model="addData.commodityId" @change="findCommodityId" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="采购数量" :label-width="formLabelWidth" prop="purchaseQuantity">
				<el-input v-model="addData.purchaseQuantity" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="单价" :label-width="formLabelWidth" @blur="check" prop="unitPrice">
				<el-input v-model="addData.unitPrice" @blur="onBsp($event)" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="总价" :label-width="formLabelWidth">
				<el-input v-model="addData.totalPrice" autocomplete="off" disabled></el-input>
			</el-form-item>
			<el-form-item label="采购日期" :label-width="formLabelWidth" prop="purchaseDate">
				<div class="block">
					<el-date-picker
							v-model="addData.purchaseDate"
							type="date"
							value-format="yyyy-MM-dd"
							placeholder="选择日期">
					</el-date-picker>
				</div>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="addCancel('addData')">取 消</el-button>
			<el-button type="primary" @click="addSure('addData')">确 定</el-button>
		</div>
	</el-dialog>

</div>


<script>
	// 创建一个vue的实例对象,里面写那些数据和方法(一个是页面加载完后自动执行的方法，一个是其他操作后执行的代码)
	// 创建 Vue 实例
	new Vue({
		el: '#app',
		data() {
			return {
				selectData:{
					id:'',
					name:''
				},
				tableData:[],
				rowData:{},
				dialogFormVisible:false,
				formLabelWidth: '120px',
				addData:{
					commodityId:'',
					purchaseQuantity:'',
					unitPrice:'',
					totalPrice:'',
					purchaseDate:'',
					status:0
				},
				rules: {
					commodityId: [
						{ required: true, message: '请输入商品编号', trigger: 'blur' }
					],
					purchaseQuantity: [
						{ required: true, message: '请输入采购数量', trigger: 'blur' },
						{pattern:/^[1-9]\d*$/g,message: '只能输入正整数'}
					],
					unitPrice: [
						{ required: true, message: '请输入单价', trigger: 'blur' },
						{ pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确额格式,可保留两位小数' }
					],
					purchaseDate: [
						{ type: 'string', required: true, message: '请选择采购日期', trigger: 'change' }
					]
				}
			}
		},
		methods: {
			onBsp(e){
				this.addData.totalPrice = this.addData.unitPrice * this.addData.purchaseQuantity;
				console.log( this.addData.totalPrice );
			},
			exportToExcel() {
				let wb = XLSX.utils.book_new();
				let ws = XLSX.utils.json_to_sheet(this.tableData);
				XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
				const fileName = window.prompt("请输入文件名", "tableData.xlsx");
				if (fileName) {
					XLSX.writeFile(wb, fileName);
				}
			},
			check:function (){
				this.addData.totalPrice = this.addData.unitPrice * this.addData.purchaseQuantity;
				alert( this.addData.totalPrice );
			},
			select(){
				console.log("查询");
				let str = '&commodityId='+this.selectData.id + '&commodityName='+this.selectData.name;
				axios.get('../purchaseInventory?op=findByTrem&purchaseStatus=0' + str).then(resp => {
					if (resp.data.code == 200){
						this.tableData = resp.data.data;
					}
				});
			},
			purchase(index,row){
				console.log("入库");
				this.rowData = row;
				axios.get('../purchaseInventory?op=inventory&purchaseId='+this.rowData.purchaseId).then(resp => {
					if (resp.status == 200){
						if (resp.data){
							console.log("入库成功");
							this.show();
						}else{
							console.log("入库失败")
						}
					}else{
						console.log("入库失败" + resp.status);
					}
				});
			},
			//添加采购信息商品编号检查
			findCommodityId:function(idstr){
				if (idstr != null){
					axios.get('../addGoods', {params: {op:'findByTrem',commodityId:idstr}}).then(res => {
						if (res.data.data == null){
							alert(idstr + "：该商品编号不存在！");
							this.addData.commodityId = '';
						}else {
							this.addData.commodityId = idstr;
						}
					})
				}
			},
			//添加取消
			addCancel(formName){
				this.dialogFormVisible = false;
				this.$refs[formName].resetFields();
				this.addClear();
			},
			//表单数据清空
			addClear:function(){
				this.addData.commodityId = '';
				this.addData.purchaseQuantity = '';
				this.addData.unitPrice = '';
				this.addData.totalPrice = '';
				this.addData.purchaseDate = '';
			},
			//添加确认
			addSure(formName){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.dialogFormVisible = false;
						let str = '&commodityId='+this.addData.commodityId +
							'&purchaseQuantity='+this.addData.purchaseQuantity +
							'&unitPrice='+this.addData.unitPrice +
							'&purchaseDate='+this.addData.purchaseDate;
						axios.get('../purchaseInventory?op=add' + str).then(resp => {
							if (resp.status == 200){
								if (resp.data){
									console.log("添加成功");
									this.show();
								}else{
									console.log("添加失败")
								}
							}else{
								console.log("添加失败" + resp.status);
							}
						});
						this.$refs[formName].resetFields();
						this.addClear();
					} else {
						console.log('error submit!!');
						return false;
					}
				});

			},
			show:function () {
				axios.get('../purchaseInventory?op=findByTrem&purchaseStatus=0').then(resp => {
					if (resp.data.code == 200){
						this.tableData = resp.data.data;
					}
				});
			}
		},
		mounted(){
			this.show();
		}
	});
</script>

</body>

</html>
